<template>
  <div style="background-color: white;height: 890px;margin: 25px;border-radius: 15px">
    <el-image :src="logoPic" style="margin: 15% 0 0 10%"></el-image>
    <el-menu default-active="classify" text-color="#7d8592" router style="width: 85%;margin: 0 auto">
      <el-menu-item index="classify">
        <el-icon><document /></el-icon>
        <span>图像分类</span>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <span>数据分类</span>
      </el-menu-item>
    </el-menu>
    <el-image :src="supportPic" style="margin-left: 14%;margin-top: 400px"></el-image>
  </div>
</template>

<script setup>
import logoPic from "@/assets/logo/logo-blue.png"
import {Document} from "@element-plus/icons-vue";
import supportPic from "@/assets/images/workSpace/Support.png"
//
</script>

<style scoped lang="scss">
:deep(.el-menu) {
  border-right: none;
}
:deep(.el-menu-item){
  height: 45px;
  margin: 10px 0;
  font-weight: bold;
  font-size: 16px;
  &:hover{
    border-radius: 15px;
    background-color: #ebf3ff;
  }
  &:focus{
    border-radius: 15px;
    background-color: #ebf3ff;
  }
}
:deep(.is-active) {
    border-radius: 15px;
    background-color: #ebf3ff;
}
</style>
